<template>
    <!-- vue3页面 -->
    
    <div class="sevenOneWrap">
    
        <el-button type="primary" @click="syd">点击弹出消息提示</el-button>
        <div style="display: inline-block">
            <el-select
                v-model="value1"
                multiple clearable
                placeholder="Select"
                style="width: 240px"
            >
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
            </el-select>
            <el-input v-model="value2"></el-input>
        </div>

        <div class="custom-tree-container">
            <p>Using render-content</p>
            <el-tree
                :data="dataSource"
                show-checkbox
                node-key="id"
                default-expand-all
                :expand-on-click-node="false"
                :render-content="renderContent"
            />
            <p>Using scoped slot</p>
            <el-tree
                :data="dataSource"
                show-checkbox
                node-key="id"
                default-expand-all
                :expand-on-click-node="false"
            >
                <template #default="{ node, data }">
                    <span class="custom-tree-node">
                        <span>{{ node.label }}</span>
                        <span>
                            <a @click="append(data)"> Append </a>
                            <a style="margin-left: 8px" @click="remove(node, data)"> Delete </a>
                        </span>
                    </span>
                </template>
            </el-tree>
        </div>
    
    </div>
</template>

<script lang='ts'>
import { ElMessage } from 'element-plus'
import { defineComponent, reactive, ref } from 'vue'
import type Node from 'element-plus/es/components/tree/src/model/node'
export default defineComponent({
    name: 'sevenOne',
    setup() {
        const syd = ()=>{
            console.log('弹出消息提示')
            ElMessage('成功')
        }

        const value1 = ref([])
        const value2 = ref('')
        const options = [
            {
                value: 'Option1',
                label: 'Option1',
            },
            {
                value: 'Option2',
                label: 'Option2',
            },
            {
                value: 'Option3',
                label: 'Option3',
            },
            {
                value: 'Option4',
                label: 'Option4',
            },
            {
                value: 'Option5',
                label: 'Option5',
            },
        ]

        interface Tree {
            id: number
            label: string
            children?: Tree[]
        }
        let id = 1000

        const append = (data: Tree) => {
            const newChild = { id: id++, label: 'testtest', children: [] }
            if (!data.children) {
                data.children = []
            }
            data.children.push(newChild)
            dataSource.value = [...dataSource.value]
        }

        const remove = (node: Node, data: Tree) => {
            const parent = node.parent
            const children: Tree[] = parent.data.children || parent.data
            const index = children.findIndex((d) => d.id === data.id)
            children.splice(index, 1)
            dataSource.value = [...dataSource.value]
            }

        const renderContent = (
            h: any,
            {
                node,
                data,
                store,
            }: {
                node: Node
                data: Tree
                store: Node['store']
            }
        ) => {
            return h(
                'span',
                {
                    class: 'custom-tree-node',
                },
                h('span', null, node.label),
                h(
                'span',
                null,
                h(
                    'a',
                    {
                        onClick: () => append(data),
                    },
                    'Append '
                ),
                h(
                    'a',
                    {
                        style: 'margin-left: 8px',
                        onClick: () => remove(node, data),
                    },
                    'Delete'
                )
                )
            )
            }

        const dataSource = ref<Tree[]>([
            {
                id: 1,
                label: 'Level one 1',
                children: [
                {
                    id: 4,
                    label: 'Level two 1-1',
                    children: [
                    {
                        id: 9,
                        label: 'Level three 1-1-1',
                    },
                    {
                        id: 10,
                        label: 'Level three 1-1-2',
                    },
                    ],
                },
                ],
            },
            {
                id: 2,
                label: 'Level one 2',
                children: [
                {
                    id: 5,
                    label: 'Level two 2-1',
                },
                {
                    id: 6,
                    label: 'Level two 2-2',
                },
                ],
            },
            {
                id: 3,
                label: 'Level one 3',
                children: [
                {
                    id: 7,
                    label: 'Level two 3-1',
                },
                {
                    id: 8,
                    label: 'Level two 3-2',
                },
                ],
            },
        ])
        return {
            syd,value1,options,value2,
            dataSource,renderContent,remove,append
        }
    }
})
</script>

<style scoped>
.sevenOneWrap :deep(.custom-tree-container .custom-tree-node) {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}
</style>